<#assign shiro=JspTaglibs["http://shiro.apache.org/tags"]>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>个人中心</title>
    <!-- Le styles -->
    <link href="/common/js/bootstrap-3.0.0/css/bootstrap-united.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/common/js/jquery-plugin/validate/style.css" type="text/css">
    <style type="text/css">
        body {
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#profileCenter">个人资料</a></li>
        <li><a data-toggle="tab" href="#passwordCenter">密码管理</a></li>
    </ul>
    <div class="tab-content">
        <div id="profileCenter" class="tab-pane fade active in">
            <form id="form" method="post" class="form-horizontal" style="padding-top: 20px;">
                <fieldset>
                    <legend>个人资料</legend>
                <#if user??>
                    <input type="hidden" id="id" name="id" value="${user.id}">
                </#if>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="userName">用户名:</label>

                        <div class="col-md-4">
                            <input type="text" id="userName" class="form-control" disabled="disabled"
                                   value="${(user.username)!''}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="password">密码:</label>

                        <div class="col-md-4">
                            <input type="text" id="userName" class="form-control" disabled="disabled"
                                   value="${(user.username)!''}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="password2">重复密码:</label>

                        <div class="col-md-4">
                            <input type="text" id="password2" class="form-control" disabled="disabled"
                                   value="${(user.username)!''}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="email">邮箱:</label>

                        <div class="col-md-4">
                            <input type="text" class="form-control" value="${(user.email)!''}" disabled="disabled">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="status">是否可用:</label>

                        <div class="col-md-4">
                            <label class="checkbox">
                                <input type="checkbox" disabled="disabled"
                                <#if !user?? || (user?? && user.status == 1)>
                                       checked="checked"
                                </#if>
                                        >
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="status">描述:</label>

                        <div class="col-md-4">
                            <textarea class="form-control" disabled="disabled">${(user.descn)!''}</textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-4">
                        <#--<button class="btn btn-primary" type="button">保存</button>-->
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div id="passwordCenter" class="tab-pane fade">
            <form id="passwordForm" method="post" class="form-horizontal" style="padding-top: 20px;">
                <fieldset>
                    <legend>
                        修改密码
                    </legend>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="oldPassword">原始密码:</label>

                        <div class="col-md-4">
                            <input type="password" id="oldPassword" class="form-control" name="oldPassword"
                                   required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="newPassword">新密码:</label>

                        <div class="col-md-4">
                            <input type="password" id="newPassword" class="form-control" name="newPassword"
                                   required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" for="newPassword2">再次输入新密码:</label>

                        <div class="col-md-4">
                            <input type="password" id="newPassword2" class="form-control" name="newPassword2"
                                   required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-4">
                            <button class="btn btn-primary" type="submit">保存</button>
                            <button class="btn btn-info" type="reset">重置</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/common/js/bootstrap-3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/common/js/jquery-plugin/validate/jquery.validate.1.11.1.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.md5.js"></script>
<script type="text/javascript">
    $(function () {
        $.validator.setDefaults({
            submitHandler: function (form) {
                if (form.id == 'passwordForm') {
                    changePassword();
                } else {

                }
            }
        });

        $("#passwordForm").validate({
            rules: {
                oldPassword: {
                    required: true,
                    rangelength: [6, 16]
                },
                newPassword: {
                    required: true,
                    rangelength: [6, 16]
                },
                newPassword2: {
                    required: true,
                    rangelength: [6, 16],
                    equalTo: '#newPassword'
                }
            },
            messages: {
                oldPassword: {
                    required: "请输入原始密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串"
                },
                newPassword: {
                    required: "请输入新密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串"
                },
                newPassword2: {
                    required: "请再次输入新密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                    equalTo: '两次新密码不一致'
                }
            },
            highlight: function (element) {
//                $(element).next("label.valid").remove();
                $(element).closest('.form-group').removeClass('success').addClass('error');
            },
            unhighlight: function (element) {
//                if ($(element).next("label.valid").length == 0) {
//                    $(element).after("<label class='valid'/>");
//                }
                $(element).closest('.form-group').removeClass('error').addClass('success');
            }
        });
    });

    function changePassword() {
        var oldPassword = $.md5($("#oldPassword").val());
        var newPassword = $.md5($("#newPassword").val());
        $.ajax({
            type: "post",
            url: '/user/updatePassword.json',
            data: {
                oldPassword: oldPassword,
                newPassword: newPassword
            },
            success: function (data) {
                $("#passwordForm div.alert").remove();
                if (data.success == 'SUCCESS') {
                    var div = $("<div></div>").addClass("alert alert-success fade in");
                    $('<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>').appendTo(div);
                    $('<p></p>').html(data.msg).appendTo(div);
                    $("#passwordForm .form-group:first").before(div);
                    $("#passwordForm")[0].reset();
                } else {
                    var div = $("<div></div>").addClass("alert alert-warning fade in");
                    $('<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>').appendTo(div);
                    $('<p></p>').html(data.msg).appendTo(div);
                    $("#passwordForm .form-group:first").before(div);
                }
            }
        });
    }
</script>
</body>
</html>